﻿<!DOCTYPE html>
<html>
<!-- MSDS数据库-编辑 -->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <script src="/static/js/wangEditor.min.js" type="text/javascript"></script>
    <link href="/static/js/wangEditor.min.css" rel="stylesheet" />
    <style>
        .popupW100 .inputTextarea .el-form-item__content {
            margin-left: 0px !important;
        }

        body {
            padding-bottom: 10px;
        }

        .yangshi1 {
            font-weight: bold
        }
    </style>
</head>

<body>
    <div id="app" class="popupW100" v-cloak>
        <el-form label-position="right" :model="Form" status-icon :rules="rules" ref="ruleForm" label-width="100px"
            size="mini">
            <el-row style="margin-bottom:8px">
                <el-col :span="24" class="yangshi1">
                    第一部分：化学名称
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item prop="ChemicalChineseName">
                            <el-input type="text" v-model="Form.ChemicalChineseName" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{MSDSdatabase.ChemicalChineseName+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="Form.ChemicalChineseName.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="2">
                    <div class="elst-select-mini">
                        <el-form-item prop="ChemicalName">
                            <el-input type="text" v-model="Form.ChemicalName" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{MSDSdatabase.ChemicalName+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="Form.ChemicalName.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item prop="ChemicalEnglishName">
                            <el-input type="text" v-model="Form.ChemicalEnglishName" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{MSDSdatabase.ChemicalEnglishName+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="Form.ChemicalEnglishName.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="2">
                    <div class="elst-select-mini">
                        <el-form-item prop="EnglishName">
                            <el-input type="text" v-model="Form.EnglishName" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{MSDSdatabase.EnglishName+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="Form.EnglishName.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item prop="SpecificationCode">
                            <el-input type="text" v-model="Form.SpecificationCode" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{MSDSdatabase.SpecificationCode+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="Form.SpecificationCode.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="2">
                    <div class="elst-select-mini">
                        <el-form-item prop="CASNo">
                            <el-input type="text" v-model="Form.CASNo" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{MSDSdatabase.CASNo+mark.m}}
                                </template>
                            </el-input>
                            <span class="iputLineMust" v-if="Form.CASNo.length<=0">
                                <!-- 必填项添加 -->
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item prop="ManufacturerName">
                            <el-input type="text" v-model="Form.ManufacturerName" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{MSDSdatabase.ManufacturerName+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11" :offset="2">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{MSDSdatabase.EffectiveDate+mark.m}}
                                </template>
                                <el-date-picker slot="suffix" v-model="Form.EffectiveDate" type="date" size="mini"
                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择时间">
                                </el-date-picker>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item prop="Address">
                            <el-input type="text" v-model="Form.Address" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{MSDSdatabase.Address+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <div id="editorBox">
            </div>

            <el-row type="flex" justify="end">
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>
                    <!-- <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}</el-button> -->
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
    <script type="text/javascript">
        var E = window.wangEditor
        var app = new Vue({
            el: '#app',
            data: {
                value1: '',
                radio: '1',
                CompositionInformation: "",
                RiskOverview: '',//危险性概述
                First_aid: '',//急救措施
                Fire_fightingMeasures: '',//消防措施
                LeakageEmergencyTreatment: '',//泄露应急处理
                HandlinStorage: '',//操作处置与存储
                ContactControlpersonalProtection: '',//接触控制/个体防护
                ChemicalProperties: '',//理化特性
                StabilityAndReactivity: '',//稳定性与反应活性
                ToxicologicalInformation: '',//毒理学资料
                EcologicalInformation: '',//生态学资料
                Disposal: '',//废弃处置
                TransportInformation: '',//运输信息
                RegulatoryInformation: '',//法规信息
                OtherInformation: '',//其他信息
                name: {
                    CompositionInformation: '第二部分：成分/组成信息',
                    RiskOverview: '第三部分：危险性概述',//危险性概述
                    First_aid: '第四部分：急救措施',//急救措施
                    Fire_fightingMeasures: '第五部分：消防措施',//消防措施
                    LeakageEmergencyTreatment: '第六部分：泄露应急处理',//泄露应急处理
                    HandlinStorage: '第七部分：操作处置与存储',//操作处置与存储
                    ContactControlpersonalProtection: '第八部分：接触控制/个体防护',//接触控制/个体防护
                    ChemicalProperties: '第九部分：理化特性',//理化特性
                    StabilityAndReactivity: '第十部分：稳定性与反应活性',//稳定性与反应活性
                    ToxicologicalInformation: '第十一部分：毒理学资料',//毒理学资料
                    EcologicalInformation: '第十二部分：生态学资料',//生态学资料
                    Disposal: '第十三部分：废弃处置',//废弃处置
                    TransportInformation: '第十四部分：运输信息',//运输信息
                    RegulatoryInformation: '第十五部分：法规信息',//法规信息
                    OtherInformation: '第十六部分：其他信息',//其他信息
                },
                list: {
                    CompositionInformation: '',
                    RiskOverview: '',//危险性概述
                    First_aid: '',//急救措施
                    Fire_fightingMeasures: '',//消防措施
                    LeakageEmergencyTreatment: '',//泄露应急处理
                    HandlinStorage: '',//操作处置与存储
                    ContactControlpersonalProtection: '',//接触控制/个体防护
                    ChemicalProperties: '',//理化特性
                    StabilityAndReactivity: '',//稳定性与反应活性
                    ToxicologicalInformation: '',//毒理学资料
                    EcologicalInformation: '',//生态学资料
                    Disposal: '',//废弃处置
                    TransportInformation: '',//运输信息
                    RegulatoryInformation: '',//法规信息
                    OtherInformation: '',//其他信息
                },
                // picked : '1',
                //父业传参
                id: '',

                //业务表单内容
                Form: {
                    id: guidEmpty,
                    ChemicalChineseName: "",
                    ChemicalEnglishName: "",
                    ChemicalName: "",
                    EnglishName: "",
                    CASNo: "",
                    SpecificationCode: "",
                    ManufacturerName: "",
                    Address: "",
                    EffectiveDate: "",
                    Dateofaddition: "",
                    Addpeople: "",
                    CompositionInformation: '',//成分/组成信息
                    RiskOverview: '',//危险性概述
                    First_aid: '',//急救措施
                    Fire_fightingMeasures: '',//消防措施
                    LeakageEmergencyTreatment: '',//泄露应急处理
                    HandlinStorage: '',//操作处置与存储
                    ContactControlpersonalProtection: '',//接触控制/个体防护
                    ChemicalProperties: '',//理化特性
                    StabilityAndReactivity: '',//稳定性与反应活性
                    ToxicologicalInformation: '',//毒理学资料
                    EcologicalInformation: '',//生态学资料
                    Disposal: '',//废弃处置
                    TransportInformation: '',//运输信息
                    RegulatoryInformation: '',//法规信息
                    OtherInformation: '',//其他信息

                },
                //表单验证
                rules: {
                    Country: [
                        verification.NotNull,
                    ],
                    Productname: [
                        verification.NotNull,
                    ],
                    company: [
                        verification.NotNull,
                    ],


                }
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //PDF上传成功
                pdfok: function () {
                    this.$message({
                        message: 'PDF上传成功',
                        type: 'success'
                    });
                },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    var list = mythis.list;
                    for (var key in list) {
                        mythis.Form[key] = list[key].txt.html();
                    }
                    this.$refs[formName].validate(function (valid) {
                        if (valid) {
                            onSubmitForm(this, '/api/MSDSdatabase/Save', mythis.Form);
                        } else {
                            //验证失败
                            return false;
                        }
                    });
                },
                getData: function () {
                    getData(this, '/api/MSDSdatabase/get?id=' + this.id);

                },
            },
            mounted: function () {
                this.id = getUrlParam("id");
                this.getData();

                var list = this.list;
                var name = this.name

                for (var key in list) {
                    $("#editorBox").append('<el-row style="margin-bottom:8px; " class="yangshi1"> <el-col :span = "24" style="margin-bottom:8px; " >' + name[key] + '</el-col ></el-row ><el-row><el-col : span="24"><el-form-item class="inputTextarea"><div id="' + key + '" style="margin-bottom:10px;"></div></el-form-item></el-col></el-row>')

                    list[key] = new E('#' + key);
                    list[key].customConfig.menus = [
                        'head',  // 标题
                        'bold',  // 粗体
                        'fontSize',  // 字号
                        'fontName',  // 字体
                        'italic',  // 斜体
                        'underline',  // 下划线
                        'strikeThrough',  // 删除线
                        'foreColor',  // 文字颜色
                        'backColor',  // 背景颜色
                        'list',  // 列表
                        'justify',  // 对齐方式
                        'table',  // 表格
                        'undo',  // 撤销
                        'redo'  // 重复
                    ];
                    list[key].create();
                    list[key].txt.html(this.Form[key]);

                }
                //初始化数据
                // this.GetPageData(1);
                //列表高度自适应
                tablehigh(this);

            },

        });
    </script>
</body>

</html>